<template>
	<view>
		<u-sticky bgColor="#fff">
			<view class="search">
				<u-search :showAction="true" actionText="搜索" v-model="search" :animation="true" @search="searchfun"></u-search>
			</view>
			<view class="sticky_screen">
				<text @click="dateChange(1)">昨天</text>
				<text @click="dateChange(2)">近7天</text>
				<text @click="dateChange(3)">当月</text>
			</view>
		</u-sticky>
		<view class="detailed_box">
			<view class="detailed_card">
				<view class="detailed_card_title">
					<u-icon size="18" color="#ffffff" name="red-packet"></u-icon>
					<text class="card">累计交易(元)</text>
				</view>
				<h2>{{all_total}}</h2>
			</view>
			<view v-if="data.length > 0" class="detailed_list">
				<view class="detailed_item" v-for="(item, index) in data" :key="index">
					<view class="detailed_item_title">
						<text>{{item.name}}</text>
						<text>{{item.money}}</text>
					</view>
					<view class="detailed_item_text">
						<text>{{item.sn}}</text>
						<view class="orderState">
							<u-button v-if="item.order_type == 0" text="未知的上游交易类型" size="mini"></u-button>
							<u-button v-else-if="item.order_type == 1" type="primary" text="贷记卡" size="mini"></u-button>
							<u-button v-else-if="item.order_type == 2" type="success" text="借记卡" size="mini"></u-button>
							<u-button v-else-if="item.order_type == 3" type="info" text="云闪付" size="mini"></u-button>
							<u-button v-else-if="item.order_type == 4" type="warning" text="扫码" size="mini"></u-button>
							<u-button v-else-if="item.order_type == 5" type="error" text="支付宝大额" size="mini"></u-button>
						</view>
					</view>
					<view class="detailed_item_text">
						<text>{{item.trade_time}}</text>
					</view>
				</view>
			</view>
			<u-empty v-else mode="list" icon="/static/Empty/data_null.png">
			</u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: [],
				page: 1,
				bottom: true,
				all_total: '0.00',
				all_num: 0,
				day: null,
				type: 0,
				product_id: null,
				search: null
			}
		},
		onLoad(e) {
			this.day = e.day
			this.product_id = e.product_id
			this.loadData()
		},
		//下拉刷新
		onReachBottom() {
			if (this.bottom == true) {
				this.page += 1
				this.loadData()
			}
		},
		methods: {
			searchfun() {
				this.loadData()
			},
			dateChange(type) {
				this.type = type
				this.page = 1
				this.data = []
				this.bottom = true
				this.loadData()
			},
			//数据列表
			async loadData() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/getHzyTranDetail',
					data: {
						page: this.page,
						page_size: 15,
						product_id: this.product_id,
						day: this.day,
						type: this.type,
						search: this.search
					}
				});
				uni.hideLoading()
				if (res.code == 200) {
					this.all_total = res.data.total
					if (res.data.data.data !== undefined && res.data.data.data !== null && res.data.data.data.length > 0) {
						if (this.page == 1) {
							this.data = res.data.data.data
						} else {
							this.data = [...this.data, ...res.data.data.data]
						}
					} else {
						this.bottom = false
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F2F6FC;
	}
	.screen_box {
		padding: 30rpx 50rpx;
		box-sizing: border-box;

		.screen_option {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 30rpx 0;

			text {
				background-color: #eee;
				border: #eee 1px solid;
				padding: 10rpx 20rpx;
				color: #333;
				border-radius: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			text.on {
				background-color: #eee;
				border: #55aaff 1px solid;
				padding: 10rpx 20rpx;
				color: #55aaff;
				border-radius: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			input {
				border: #eee 1px solid;
				border-radius: 100px;
				padding: 10rpx 30rpx;
				text-align: center;
				width: 30%;
			}
		}
	}

	.btn {
		display: flex;
		align-items: center;

		text {
			width: 50%;
			padding: 30rpx 0;
			text-align: center;
		}

		text:nth-child(1) {
			background-color: #eee;
		}

		text:nth-child(2) {
			background-color: #55aaff;
			color: #fff;
		}
	}

	.search {
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #fff;
	}

	.sticky_screen {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		padding-bottom: 20rpx;

		text {
			background-color: #55aaff;
			color: #fff;
			border-radius: 100rpx;
			padding: 10rpx 60rpx;
			font-size: 24rpx;
		}
	}

	.detailed_box {
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		.detailed_card {
			margin-top: 20rpx;
			padding: 30rpx;
			border-radius: 15rpx;
			box-shadow: 7px 0px 30px -18px #888888;
			margin-bottom: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			// background-color: #fff;
			background: url('../../../../static/total_bgimg.png') no-repeat center;
			
			.detailed_card_title {
				color: #ffffff;
				display: flex;
			}

			.card {
				font-size: 28rpx;
				color: #ffffff;
			}

			h2 {
				font-weight: 500;
				font-size: 42rpx;
				margin: 20rpx 0;
				color: #ffffff;
			}
		}

		.detailed_list {
			margin-top: 20rpx;
			padding: 30rpx;
			padding-bottom: 0;
			border-radius: 15rpx;
			box-shadow: 7px 0px 30px -18px #888888;
			margin-bottom: 30rpx;
			display: flex;
			flex-direction: column;
			background-color: #fff;

			.detailed_item {
				border-bottom: #eee solid 1px;
				margin-bottom: 30rpx;

				view {
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #333;
					font-size: 32rpx;
				}
				
				.detailed_item_title {
					padding-bottom: 30rpx;
				}

				.detailed_item_text {
					font-size: 24rpx;
					color: #666;
					padding-bottom: 30rpx;
					
					.orderState {
						padding-top: 4rpx;
					}
				}
			}

			.detailed_item:last-child {
				margin-bottom: 0;
				border-bottom: none;
			}
		}
	}
</style>